<template>
	<div class="Head_and_tail"
		v-loading="saveUploading.status"
		:element-loading-text="saveUploading.txt"
		v-loading.fullscreen.lock="saveUploading.full">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<div class="publishFrom_up">
					<el-form-item label="设置片头">
						<updater-image-dom :picture="ruleForm.imageUrlHead" :options="uploadOptionsImg" @imgListen="getheadimg"></updater-image-dom>
					</el-form-item>
					<el-form-item label="设置片尾">
						<updater-image-dom :picture="ruleForm.imageUrlTail" :options="uploadOptionsImg" @imgListen="gettailimg"></updater-image-dom>
					</el-form-item>
				</div>
				<div class="publishFrom_if publishFrom_if2 clear">
					<el-form-item label="开始时间" class="publishFrom_if_l fl">
						<span>
							<el-input-number 
								v-model="ruleForm.startTime" 
								controls-position="right" 
								:min="1" :max="10">
							</el-input-number>
							<i class="second">S</i>
						</span>
					</el-form-item>
					<!--  -->
					<el-form-item label="结束时间" class="publishFrom_if_l fr">
						<span>
							<el-input-number 
								v-model="ruleForm.endTime" 
								controls-position="right" 
								:min="1" :max="10">
							</el-input-number>
							<i class="second">S</i>
						</span>
					</el-form-item>
				</div>
				<el-form-item class="buttonCSS cropper_btn">					
					<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
	</div>
</template>

<script>

    import updaterImageDom from './uploader-image';
	export default {
		props : ['compParam','activeIndex'],
		name: '',
		data() {
			return {
				thisIndex:'5',
				time1: '00:00:00 - 00:30:00',
				time2: '00:00:00 - 00:30:00',
				saveUploading:{
					status: false ,
					txt:"正在保存...",
					full:false
				},
				ruleForm: {
					endTime: 0, //结束时间
					startTime: 0, //开始时间
					imageUrlHead:'', //
					imageUrlTail: '', //
				},
				isActive: false,
				selectFileOrNotImgHead: false, //是否选中文件
				selectFileOrNotImgTail: false, //是否选中文件
				attrsImg: {
				    accept: ['image/*']
				},
				uploadOptionsImg: {
				    target: this.BASE_URL + "/api/resource/res_upload",
				    testChunks: false,
				    headers: { 
				    	Authorization: `Bearer ` + this.$g.access_token,
				    }
				},
				initHeadTailData:null,
			}
		},
	    mounted(){
	     	this.initFunc();
	    },
	    watch:{
			'activeIndex':{
	    		handler(n){
	    			if( n === this.thisIndex ){
	    				this.initFunc();
	    			}
	    		},
	    		
	    	},
	    },
		methods: {
			initFunc(){
				this.getHeadTail();
			},
			getHeadTail(){
				let success = (data => {
					this.initHeadTailData = null;
                    this.initHeadTailData = data.data;
                    
					this.ruleForm = {
						endTime: data.data.tail_time > 0 ? data.data.tail_time: 3, //结束时间
						startTime:  data.data.title_time > 0 ? data.data.title_time: 3, //开始时间
						imageUrlHead: data.data.title ? data.data.title : '',
						imageUrlTail: data.data.tail ? data.data.tail : ''
					}
                })
                
				this.$ajax.get('api/video/trailer',{params:{video_id:this.compParam.id},func:{success:success}})
			},
			saveHeadTail(){
				

				let success = (data => {
					this.saveUploading.status = false;
					this.saveUploading.full = false;
					this.$message.success(data.msg);
					this.$emit('changeIndexx' );
					setTimeout(()=>{
						this.$router.push('/teach/video/index')
					}, 1000);
				})
				let fail = (data => {
					this.$message.error(data.msg)
					this.saveUploading.status = false;
					this.saveUploading.full = false;
					this.initFunc();
				})
				let params  = {
					video_id: this.compParam.id,
					head_time : this.ruleForm.startTime,
					head_path : this.ruleForm.imageUrlHead,
					tail_time : this.ruleForm.endTime,
					tail_path : this.ruleForm.imageUrlTail,
				}

				this.$ajax.post('api/video/trailer', params ,{func: {success: success, fail: fail}})
			},
			//表单验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {

						if (this.ruleForm.imageUrlHead == '' && this.ruleForm.imageUrlTail == '') {
							this.saveUploading.status = false;
							this.saveUploading.full = false;
							this.$message.warning('请先上传图片');

							return false;
						}

						this.$confirm('视频合成所需时间根据视频大小而定，在合成期间视频将不能播放以及无法编辑，确定合成?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							customClass: 'confirm-them',
						}).then((res) => {
							this.saveUploading.status  = true;
							this.saveUploading.full = true;
							this.saveHeadTail()

						}).catch(() => {});
						
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getheadimg(mess) {
                this.ruleForm.imageUrlHead = mess ? mess.file_path : '';

                if (mess === '' && this.initHeadTailData.title !== '') {
                    let success = (res => {
                        this.getHeadTail();
                    })

                    let fail = (res=>{ })
                    let params = {
                        video_id: this.compParam.id,
                        type: 'title'
                    }

                    this.$ajax.delete('api/video/trailer', {params: params, func: {success: success, fail: fail}});
                }
			},
			gettailimg(mess) {
                this.ruleForm.imageUrlTail = mess ? mess.file_path : '';
                
                if (mess === '' && this.initHeadTailData.tail !== '') {
                    let success = (res => {
                        this.getHeadTail();
                    })
                     let fail = (res=>{ })
                    let params = {
                        video_id: this.compParam.id,
                        type: 'tail'
                    }

                    this.$ajax.delete('api/video/trailer', {params: params, func: {success: success, fail: fail}});
                }
			}
		},
		components: {
			updaterImageDom
		}
	}
</script>